<template>
  <div>
    <van-grid :column-num="navigationArr.length">
      <van-grid-item
        v-for="item in navigationArr"
        :key="item.id"
        :icon="item.icon_url"
        :text="item.name"
        @click="btn(item.id)"
      />
    </van-grid>
    <div class="brand">
      <p>品牌制作商直供</p>
      <ul>
        <li v-for="item in brand" :key="item.id" @click="brandFn(item.id)">
          <img v-lazy="item.pic_url" alt="" />
          <span>{{ item.name }}</span>
          <p>￥{{ item.sort_order }}元</p>
        </li>
      </ul>
    </div>

    <div class="new">
      <p>周一周四.新品首发</p>
      <ul>
        <li v-for="item in newArr" :key="item.id" @click="details">
          <img v-lazy="item.list_pic_url" alt="" />
          <span>{{ item.name }}</span>
          <p>￥{{ item.retail_price }}元</p>
        </li>
      </ul>
    </div>

    <div class="recommend">
      <p>人气推荐</p>
      <ul>
        <li v-for="item in recommend" :key="item.id" @click="details">
          <img v-lazy="item.list_pic_url" alt="" />
          <div>
            <h2>{{ item.name }}</h2>
            <p>{{ item.goods_brief }}</p>
            <span>￥{{ item.retail_price }}元</span>
          </div>
        </li>
      </ul>
    </div>

    <div class="special">
      <p>专题精选</p>
      <ul>
        <li v-for="item in special" :key="item.id" @click="details">
          <img v-lazy="item.scene_pic_url" alt="" />
          <p>{{ item.title }}</p>
          <span>{{ item.subtitle }}</span>
        </li>
      </ul>
    </div>

    <div class="kind">
      <div v-for="item in kind" :key="item.id">
        <p>{{ item.name }}</p>
        <ul>
          <li v-for="item1 in item.goodsList" :key="item1.id" @click="details">
            <img v-lazy="item1.list_pic_url" alt="" />
            <span>{{ item1.name }}</span>
            <p>￥{{ item1.retail_price }}元</p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { homelist } from "@/api/HomeApi";
export default {
  name: "",
  data() {
    return {
      navigationArr: [], //导航数据
      brand: [], //品牌数据
      newArr: [], //新品数据
      recommend: [], //人气推荐数据
      special: [], //专题数据
      kind: [], //剩余数据
    };
  },
  methods: {
    brandFn(id) {
       //跳转路由拼id
      this.$router.push("/brand"+'/'+id);
    },
    details() {
      //跳转路由
      this.$router.push("/details");
    },
    btn(id){
       //跳转路由传id
      //  console.log(this.$router);
      this.$router.push({name:"channel",query:{id}});
      
    }
  },
  mounted() {
    homelist().then((res) => {
      console.log(res);
      this.navigationArr = res.data.channel;
      this.brand = res.data.brandList;
      this.newArr = res.data.newGoodsList;
      this.recommend = res.data.hotGoodsList;
      this.special = res.data.topicList;
      this.kind = res.data.categoryList;
    });
  },
};
</script>
<style scoped lang='less'>
.brand {
  width: 100%;
  height: 300px;
  margin-top: 20px;
  p {
    text-align: center;
    margin-bottom: 15px;
    height: 20px;
    font-size: 20px;
  }
  ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    // align-content: center;
    height: 265px;

    li {
      width: 49%;
      height: 48%;
      font-size: 16px;
      position: relative;
      img {
        width: 100%;
        height: 100%;
      }
      span {
        position: absolute;
        top: 15px;
        left: 5px;
      }
      p {
        position: absolute;
        top: 40px;
        left: 5px;
        color: red;
      }
    }
  }
}
.new {
  width: 100%;
  height: 500px;
  margin-top: 20px;
  p {
    text-align: center;
    margin-bottom: 15px;
    height: 20px;
    font-size: 20px;
  }
  ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    // align-content: center;
    height: 465px;

    li {
      width: 48%;
      height: 48%;
      font-size: 16px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin-bottom: 10px;
      img {
        width: 100%;
        height: 100%;
      }
      span {
        text-align: center;
        margin-bottom: 10px;
      }
      p {
        margin-bottom: 10px;
        color: red;
      }
    }
  }
}
.recommend {
  width: 100%;
  height: 400px;
  margin-top: 60px;
  p {
    text-align: center;
    margin-bottom: 15px;
    height: 30px;
    font-size: 20px;
  }
  ul {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 355px;

    li {
      width: 100%;
      height: 32%;
      font-size: 16px;
      display: flex;
      background: rgb(250, 250, 250);
      img {
        width: 30%;
        height: 100%;
      }
      div {
        display: flex;
        flex-direction: column;
        justify-content: center;
        h2 {
          font-size: 20px;
        }
        p {
          font-size: 8px;
          text-align: left;
          margin-top: 20px;
        }
        span {
          font-size: 8px;
          color: red;
        }
      }
    }
  }
}

.special {
  width: 100%;
  height: 350px;
  margin-top: 30px;
  //   overflow: auto;

  p {
    text-align: center;
    margin-bottom: 15px;
    height: 30px;
    font-size: 20px;
  }
  ul {
    width: 94%;
    margin-left: 3%;
    margin-right: 3%;
    //   box-sizing: border-box;
    display: flex;
    overflow: auto;
    flex-shrink: 0;
    justify-content: space-between;
    height: 275px;
    li:nth-child(3) {
      margin-right: 0;
      font-size: 14px;
    }
    li {
      width: 280px;
      height: 270px;
      font-size: 16px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      box-sizing: border-box;
      margin-right: 10px;
      img {
        width: 280px;
        height: 195px;
      }
      p {
        height: 20px;
        font-size: 16px;
        //   text-align: left;
        margin-top: 20px;
      }
      span {
        width: 100%;
        height: 20px;
        font-size: 16px;
        color: red;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
}
.kind {
  div {
    margin-top: 20px;
    p {
      text-align: center;
      margin-bottom: 15px;
      height: 30px;
      font-size: 20px;
    }
    ul {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      // justify-content: center;
      justify-content: space-between;
      li {
        width: 175px;
        height: 240px;
        padding: 10px;
        box-sizing: border-box;
        img {
          width: 100%;
          height: 73%;
        }
        span {
          // height: 40px;
          font-size: 16px;
          text-align: center;
          display: flex;
          justify-content: center;
          line-height: 20px;
        }
        p {
          margin-top: 10px;
          font-size: 16px;
          color: red;
        }
      }
    }
  }
}
</style>